<template>
    <div class="infor-box">
      <van-button type="default" class="gohome" to="/me">返回个人</van-button>
  
         <div class="pictuer">
        <van-uploader v-model="fileList" multiple :max-count="1" max-size="500 * 1024"  />
        </div>
     <div class="font-infor">
         <van-cell-group ><van-field  v-model="name" label="昵称" placeholder="" /></van-cell-group>
         <van-cell-group><van-field  @click="changeSex" label="性别" placeholder="" v-model="sex" />
           <van-popup v-model="showSex" position="bottom" :style="{ height: '30%' }">  
            <van-radio-group v-model="sex" direction="horizontal">
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
           </van-popup>
          </van-cell-group> 
              <van-field  @click="showPopup" label="生日" placeholder="" v-model="birthday" @center="true"></van-field>
              <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">   
              <van-datetime-picker  @confirm="changdate"
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"/></van-popup>
          
  
         <van-cell-group><van-field  @click="showPopupAddress"   v-model="site" label="收货地址" placeholder="" /></van-cell-group>
          <van-popup v-model="showAddress" position="bottom" :style="{ height: '80%' }">   
           <van-address-edit
             :area-list="areaList"
             show-postal
             show-delete
             show-set-default
             show-search-result
             :search-result="searchResult"
             :area-columns-placeholder="['请选择', '请选择', '请选择']"
             @save="onSave"
             />
          </van-popup>
          </div>

          <van-button type="primary" block  @click="onme">提交</van-button>

    </div>
</template>

<script>

import Vue from 'vue';
import { Popup } from 'vant';
import { areaList } from '@vant/area-data';
import { AddressEdit } from 'vant';
import {Toast} from 'vant'
Vue.use(AddressEdit);
Vue.use(Popup);
export default {
    //  选项
   data() {
    return {
      fileList: [{ url: '' }],
      name: '',
      sex: '男',
      birthday: '',
      showAddress: false,
      site: '',
      minDate: new Date(1000, 0, 1),
      maxDate: new Date(3000, 10, 1),
      currentDate: new Date(2022, 1, 17),
      show: false,
      areaList,
      searchResult: [],
      showSex:false
      }
  },
created: function () {
	let stringify = localStorage.getItem("key");
  console.log(stringify);
  let obj = JSON.parse(stringify)
  
  this.name = obj.name
  this.sex = obj.sex
  this.birthday = obj.birthday
  this.site = obj.site
},  




  
  methods: {
    //  图片
   afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);  
      },
 
  showPopup() {
      this.show = true;
    },

   

    changdate(value){
      this.show = false;
      this.birthday=value.toLocaleDateString()


    },
    changeSex(){
      this.showSex = true;
    },
    
     showPopupAddress(){
         this.showAddress = true;
    },
// 地址
     onSave(content) {
      Toast('已保存');
      this.site = content.addressDetail
      console.log(content);
      this.showAddress = false
    },

// 提交内容不能为空跳转
     onme(){
       if(!this.name||!this.sex||!this.birthday||!this.site){
            this.$toast({
                            message: '请填写完整信息',
                            position: 'bottom' 
                        })
                     return

       }else {
         let obj = {
           name:this.name,
           sex:this.sex,
           birthday:this.birthday,
           site:this.site
         }
         localStorage.setItem("key",JSON.stringify(obj))
        this.$router.push("/me")
       }
     }


  }
  


}



</script>
<style lang="less" scoped>
    .infor-box {
    
        display: block;
        position: relative;
        height: 100%;
        padding: 4vh 20px 0;

        .pictuer{
            text-align: center;
            margin: 40px 0;

            .preview-cover {
             position: absolute;
             bottom: 0;
             box-sizing: border-box;
             width: 100%;
             padding: 4px;
             color: #fff;
             font-size: 12px;
             text-align: center;
             background: rgba(0, 0, 0, 0.3);
  } 
           }
        .font-infor{

            background-color: red;
        }
         

        
        }
   
</style>